<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar   title="购物车" />
    </div>
    <!--显示购物车中的商品-->
    <div class="cart-list">
        <div class="pang-row" v-for="(item,index) in cartInfo" :key="index">
            <div class="pang-img"><img :src="item.image" width="100%" /></div>
            <div class="pang-text">
                <div class="pang-goods-name">{{item.Name}}</div>
                    <div class="pang-control">
                    <van-stepper v-model="item.count" />
                </div>
            </div>
            <div class="pang-goods-price">
              <div>
                  ￥{{item.price |Money}}
              </div>
              <div>
                  x{{item.count}}
              </div>
              <div class="allPrice">
                  ￥{{item.price*item.count | Money}}
              </div>
            </div>
        </div>
    </div>

    <!-- 商品总价格 -->
    <!--显示总金额-->
    <div class="totalMoney">
        商品总价：￥ {{totalMoney | Money}}
    </div>

    <!--清空购物车-->
    <div class="card-title">
        <van-button size="small" type="danger" @click="clearCart" plain>清空购物车</van-button>
    </div>
  </div>
</template>

<script>
  import {toMoney} from '@/filter/moneyFilter.js'
  export default {
    data() {
      return {
        cartInfo: [],  //购物车内的商品
        isEmpty:false,  //购物车是否为空，不为空则显示true, 为空显示为false
      }
    },
    filters:{
      Money(money){
        return toMoney(money)
      }
    },
    computed:{
      totalMoney(){
        let allMoney=0
        this.cartInfo.forEach((val,index)=>{
          allMoney+=val.price*val.count
        })
        // localStorage.cartInfo=JSON.stringify(this.cartInfo)
        return allMoney
      }
    },
    created(){
      this.getCartInfo()
    },
    methods:{
      //清空购物车的商品
      clearCart(){
          localStorage.removeItem('cartInfo')
          this.cartInfo=[]
      },
      // 得到购物车的商品
      getCartInfo(){
        // console.log(JSON.parse(localStorage.cartInfo))
        // 判断localStorage 里是否有购物车数据
        if(localStorage.cartInfo){
          // 如果有数据，我们去除并赋值给cartInfo
          this.cartInfo=JSON.parse(localStorage.cartInfo)
        }
        // console.log(' this.cartInfo:'+JSON.stringify( this.cartInfo))
        this.isEmpty=this.cartInfo.length>0?true:false
      }
    }
  }
</script>

<style scoped>
  /* 清空购物车 */
  .card-title{
    height: 2rem;
    line-height:2rem;
    background-color: #fff;
    border-bottom:1px solid #E4E7ED;
    padding:5px;
    text-align: right;
  }

  /* 购物车商品显示 */
  .cart-list{
    background-color: #fff;
  }
  .pang-row{
      display: flex;
      flex-direction: row;
      flex-wrap:nowrap;
      padding:0.5rem;
      font-size:0.85rem;
      border-bottom:1px solid #E4E7ED;
  }
  .pang-img{
      flex:6;
  }
  .pang-text{
      flex:14;
      padding-left:10px;
  }
  .pang-control{
      padding-top: 10px;
  }
  .pang-goods-price{
      flex:4;
      text-align: right;
  }

/**商品总价格*/
.totalMoney{
    text-align: right;
    background-color: #fff;
     border-bottom:1px solid #E4E7ED;
     padding: 5px;
}
</style>
